<template>
  <div class="layout-me">

    <header class="flex-center box-shadow">
      <div class="layout-me-section layout-me-section-header ">
        <div class="logo">logo</div>
        <a-menu v-model="current" mode="horizontal">
          <a-menu-item v-for="item in menus" :key="item.value">{{item.label}}</a-menu-item>
        </a-menu>
        <div class="call">
          如有疑问请联系
          <a href="JavaScript:void(0)" target="_blank" rel="noopener noreferrer">在线客服</a>
        </div>
      </div>
    </header>
    <nuxt class="layout-me-section main" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: ['payments'],
      menus:[
        {
          label: '支付与订单',
          value:'payments'
        },
        {
          label: '个人资料',
          value:'info'
        },
        {
          label: '账号安全',
          value:'settings'
        }
      ]
    };
  },
};
</script>
<style lang="less" scoped>
  .layout-me{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: @background-color-1;
    .layout-me-section{
      width: 60%;
      min-width: 800px;
    }
    header{
      width: 100%;
      height: 50px;
      background-color: white;
      .layout-me-section-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .ant-menu-horizontal{
          border-bottom: 0;
        }
      }

    }

    >.main{
      flex: 1;
    }
  }
</style>
